/* eslint-disable */
import {
  deepSetValue,
  deepGetValue,
  debounce
} from './utils/index.js';
import Event from './Event.js';

/** 默认配置 */
const defaultOptions = {
  /** 矩形框配置 */
  rect: {
    left: -9999,
    top: 0,
    width: 0,
    height: 0,
    border: {
      color: '#fa9120',
      width: 1
    },
    style: null
  },
  /** 矩形框周围小球配置 */
  dot: {
    width: 6
  },
  /** 相关事件 */
  events: {
    contextmenu: { // 右键事件
      disabled: false // 是否禁用
    },
    draggable: { // 拖动事件 
      disabled: false // 是否禁用
    },
    clip: { // 截图操作(7个快捷键功能)
      /**
       * 开始截图：alt + w
       * 保存当前截图：ctrl + s
       * 关闭当前截图：ctrl + q
       * 键盘向左方向键操作
       * 键盘向上方向键操作
       * 键盘向右方向键操作
       * 键盘向下方向键操作
       */
      disabled: false // 是否禁用
    }
  }
}
/** 矩形绘制类 */
class Rectangle {
  constructor(target = '', options = {}) {
    if (!target || typeof target !== 'string') {
      throw new Error('请传入正确的参数')
    }
    const {
      rect,
      dot,
      events
    } = Object.assign(defaultOptions, options);
    this.rect = rect
    this.dot = dot
    this.events = events
    this.target = document.querySelector(target) // 绘制容器对象
    this.childTarget = null; // 截图矩形框对象
    this.img = {
      target: null,
      width: 0,
      height: 0,
      scale: null
    };
    this.origin = this.target.getBoundingClientRect(); // 外层dom相对于视窗的位置数据
    this.supportEvent = ['draging', 'dragend']
    this.customEvent = new Event()
    this.defaultEvent()
  }
  /** 开始绘制 */
  startPaint() {
    if (!this.childTarget) {
      this.generateRect();
    }
    this.startMouse()
  }
  /** 生成截图时的矩形框 */
  generateRect() {
    const rect = document.createElement('div');
    rect.classList.add('rect');
    const defaultClassName = 'dot'
    // 矩形框小球类名
    const dotClassNameList = ['left-top', 'middle-top', 'right-top', 'right-middle', 'right-bottom', 'middle-bottom', 'left-bottom', 'left-middle'];
    dotClassNameList.map(item => {
      const dot = document.createElement('span');
      const className = [defaultClassName, item];
      dot.classList.add(...className);
      rect.appendChild(dot);
    })
    this.childTarget = rect;
    this.target.appendChild(rect);
  }
  /** 销毁截图时的矩形框 */
  destroyRect() {
    if (this.childTarget) {
      this.target.removeChild(this.childTarget);
      this.childTarget = null;
    }
  }
  /** 清除显示区域的截图矩形框 */
  clearPaint() {
    this.rect.left = -9999;
    this.rect.top = 0;
    this.rect.width = 0;
    this.rect.height = 0;
    this.destroyRect();
  }
  /** 更新矩形框视图坐标及宽高 */
  updateRect() {
    this.childTarget.style.left = this.rect.left + 'px'
    this.childTarget.style.top = this.rect.top + 'px'
    this.childTarget.style.width = this.rect.width + 'px'
    this.childTarget.style.height = this.rect.height + 'px'
  }
  /** 获取矩形框坐标数据 */
  getRect() {
    this.rect.left = this.childTarget.style.left.replace(/px/, '')
    this.rect.top = this.childTarget.style.top.replace(/px/, '')
    this.rect.width = this.childTarget.style.width.replace(/px/, '')
    this.rect.height = this.childTarget.style.height.replace(/px/, '')
    const result ={
      left: Number(this.rect.left),
      top: Number(this.rect.top),
      width: Number(this.rect.width),
      height: Number(this.rect.height)
    }
    return result
  }
  /** 可以深层级赋值, 用小数点分割 */
  set(props, value) {
    deepSetValue(this, props, value)
  }
  /** 可以深层级取值, 用小数点分割 */
  get(props) {
    return deepGetValue(this, props)
  }
  /** 事件绑定 */
  on(eventName, callback) {
    if (!eventName || typeof eventName !== 'string') throw new Error('请传入正确的事件名！')
    if (!this.supportEvent.includes(eventName)) throw new Error(`暂时不支持【${eventName}】事件`)
    this.customEvent.on(eventName, e => {
      callback(e)
    })
  }
  /** 事件解绑 */
  off(eventName) {
    if (!eventName || typeof eventName !== 'string') throw new Error('请传入正确的事件名！')
    if (!this.supportEvent.includes(eventName)) throw new Error(`暂时不支持【${eventName}】事件`)
    this.customEvent.off(eventName)
  }
  /**
   * 主动设置样式
   * @param {*} target
   * @param {*} prop
   * @param {*} value
   */
  setStyle(target, prop, value) {
    try {
      if (target === 'rect') {
        this.childTarget.style[prop] = value
      } else if (target === 'dot') {
        const childs = this.childTarget.children
        for (let i = 0; i < childs.length; i++) {
          childs[i].style[prop] = value
        }
      }
    } catch(e) {
      throw new Error('设置错误的样式')
    }
  }
  /**
   * 内置事件-开始鼠标绘制
   */
  startMouse () {
    this.target.style.cursor = 'crosshair'
    this.target.onmousedown = e => {
      if (e.target !== this.target) return
      const left = e.offsetX
      const top = e.offsetY
      this.childTarget.style.left = left + 'px'
      this.childTarget.style.top = top + 'px'
      this.childTarget.style.borderColor = this.get('rect.border.color') // 绘制时使用选择的框的颜色
      this.childTarget.style.borderWidth = this.pxDecorate(this.get('rect.border.width')) // 绘制时使用选择的框的宽度
      const styles = this.get('rect.style')
      if (styles) {
        for (const [prop, value] of Object.entries(styles)) {
          this.childTarget.style[prop] = value
        }
      }
      const childs = this.childTarget.children
      for (let i = 0; i < childs.length; i++) {
        childs[i].style.width = childs[i].style.height = this.pxDecorate(this.get('dot.width')) // 框周边小球宽高
        childs[i].style.backgroundColor = this.get('rect.border.color') // 框周边小球背景颜色使用选择的框的颜色
      }
      this.target.onmousemove = e => {
        // 宽高边界限制
        const widthArea = e.clientX - this.origin.x > this.target.offsetWidth ? this.target.offsetWidth : e.clientX - this.origin.x
        const heightArea = e.clientY - this.origin.y > this.target.offsetHeight ? this.target.offsetHeight : e.clientY - this.origin.y
        this.childTarget.style.width = widthArea - left + 'px'
        this.childTarget.style.height = heightArea - top + 'px'
      }
      this.target.onmouseup = e => {
        this.customEvent.trigger('dragend', this.getRect())
        this.target.onmousedown = null
        this.target.onmousemove = null
        this.target.onmouseup = null
        this.target.style.cursor = ''
        // 允许拖动, 才能编辑
        if (!this.events.draggable.disabled) {
          this.editMouse()
        }
      }
    }
  }
  /**
   * 像素处理
   * @param {*} distance
   * @returns 带有px的像素
   */
  pxDecorate(distance) {
    if (!String(distance).match(/px/)) {
      return distance + 'px'
    }
    return distance
  }
  /**
   * 内置事件-鼠标编辑绘制
   */
  editMouse () {
    this.childTarget.onmousedown = e => {
      if (e.target !== this.childTarget && e.target.className.indexOf('dot') === -1) return; // 类名中包含被放行的dot除外
      const flag = this.mousedownHandle(e);
      let left = e.clientX;
      let top = e.clientY;
      const width = this.childTarget.offsetWidth;
      const height = this.childTarget.offsetHeight;
      const [dragX, dragY] = flag;
      // 拖动
      if (dragX === -1 && dragY === -1) {
        left -= this.childTarget.offsetLeft; // 要保持之前矩形框的坐标值
        top -= this.childTarget.offsetTop;
      }
      document.onmousemove = e => {
        // 取消浏览器因回流导致的默认事件及冒泡事件
        e.preventDefault();
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelable = true;
        }
        this.mousemoveHandle(flag, width, height, left, top);
        this.customEvent.trigger('draging', this.getRect());
      }
      document.onmouseup = e => {
        this.customEvent.trigger('dragend', this.getRect());
        document.onmousemove = null;
        document.onmouseup = null;
        this.setStyle(this.childTarget, 'cursor', 'move');
      }
    }
  }
  /**
   * 鼠标移动时触发逻辑
   * @param {*} flag
   */
  mousemoveHandle(flag, width, height, left, top) {
    const dragXYStr = flag.join();
    switch (dragXYStr) {
      case '-1,-1': {
        this.setStyle(this.childTarget, 'cursor', 'move');
        // 将最外层父边框宽度减去
        const rightArea = this.target.offsetWidth - this.childTarget.offsetWidth - 2; // 右边界
        const bottomArea = this.target.offsetHeight - this.childTarget.offsetHeight - 2; // 下边界
        const leftArea = 0 // 左边界
        const topArea = 0 // 上边界
        const leftPoint = e.clientX - left < leftArea ? leftArea : e.clientX - left;
        this.rect.left = e.clientX - left > rightArea ? rightArea : leftPoint;
        const topPoint = e.clientY - top < topArea ? topArea : e.clientY - top;
        this.rect.top = e.clientY - top > bottomArea ? bottomArea : topPoint;
        this.childTarget.style.left = this.rect.left + 'px';
        this.childTarget.style.top = this.rect.top + 'px';
        break;
      }
      // 中上拉伸
      case '0,0': {
        const leftPoint = e.clientX > (left + width) ? left + width - this.origin.x : e.clientX - this.origin.x;
        this.rect.left = e.clientX > this.origin.x ? leftPoint : 0;
        const topPoint = e.clientY > (top + height) ? top + height - this.origin.y : e.clientY - this.origin.y;
        this.rect.top = e.clientY > this.origin.y ? topPoint : 0;
        const widthPoint = e.clientX > (left + width) ? 0 : width + (left - e.clientX);
        this.rect.width = e.clientX > this.origin.x ? widthPoint : width + (left - this.origin.x);
        const heightPoint = e.clientY > (top + height) ? 0 : height + (top - e.clientY);
        this.rect.height = e.clientY > this.origin.y ? heightPoint : height + (top - this.origin.y);
        this.childTarget.style.left = this.rect.left + 'px';
        this.childTarget.style.top = this.rect.top + 'px';
        this.childTarget.style.width = this.rect.width + 'px';
        this.childTarget.style.height = this.rect.height + 'px';
        break;
      }
      // 右上角拉伸
      case '1,0': {
        const topPoint = e.clientY > (top + height) ? top + height - this.origin.y : e.clientY - this.origin.y;
        this.rect.top = e.clientY > this.origin.y ? topPoint : 0;
        const heightPoint = e.clientY > (top + height) ? 0 : height + (top - e.clientY);
        this.rect.height = e.clientY > this.origin.y ? heightPoint : height + (top - this.origin.y);
        this.childTarget.style.top = this.rect.top + 'px';
        this.childTarget.style.height = this.rect.height + 'px';
        break;
      }
      case '2,0': {
        const topPoint = e.clientY > (top + height) ? top + height - this.origin.y : e.clientY - this.origin.y;
        this.rect.top = e.clientY > this.origin.y ? topPoint : 0;
        const widthPoint = e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft;
        this.rect.width = widthPoint ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width;
        const heightPoint = e.clientY > (top + height) ? 0 : height + (top - e.clientY)
        this.rect.height = e.clientY > this.origin.y ? heightPoint : height + (top - this.origin.y);
        this.childTarget.style.top = this.rect.top + 'px';
        this.childTarget.style.width = this.rect.width + 'px';
        this.childTarget.style.height = this.rect.height + 'px';
        break;
      }
      // 右中拉伸
      case '2,1': {
        const widthPoint = e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft
        this.rect.width = widthPoint ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width;
        this.childTarget.style.width = this.rect.width + 'px';  
        break;
      }
      // 右下角拉伸
      case '2,2': {
        const widthPoint = e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft;
        this.rect.width = widthPoint ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width;
        const heightPoint = e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop
        this.rect.height = heightPoint ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height;
        this.childTarget.style.width = this.rect.width + 'px';
        this.childTarget.style.height = this.rect.height + 'px';
        break;
      }
      // 中下拉伸
      case '1,2': {
        const heightPoint = e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop;
        this.rect.height = heightPoint ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height;
        this.childTarget.style.height = this.rect.height + 'px';  
        break;
      }
      // 左下角拉伸
      case '0,2': {
        const leftPoint = e.clientX > (left + width) ? left + width - this.origin.x : e.clientX - this.origin.x;
        this.rect.left = e.clientX > this.origin.x ? leftPoint : 0;
        const widthPoint = e.clientX > (left + width) ? 0 : width + (left - e.clientX);
        this.rect.width = e.clientX > this.origin.x ? widthPoint : width + (left - this.origin.x);
        const heightPoint = e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop;
        this.rect.height = heightPoint ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height;
        this.childTarget.style.left = this.rect.left + 'px';
        this.childTarget.style.width = this.rect.width + 'px';
        this.childTarget.style.height = this.rect.height + 'px';
        break;
      }
      // 左中拉伸
      case '0,1': {
        const leftPoint = e.clientX > (left + width) ? left + width - this.origin.x : e.clientX - this.origin.x;
        this.rect.left = e.clientX > this.origin.x ? leftPoint : 0;
        const widthPoint = e.clientX > (left + width) ? 0 : width + (left - e.clientX);
        this.rect.width = e.clientX > this.origin.x ? widthPoint : width + (left - this.origin.x);
        this.childTarget.style.left = this.rect.left + 'px';
        this.childTarget.style.width = this.rect.width + 'px';
        break;
      }
    }
  }
  /**
   * mousedown逻辑处理
   */
  mousedownHandle (e) {
    let left = e.offsetX
    let top = e.offsetY
    let width = e.target.offsetWidth
    let height = e.target.offsetHeight
    // 点击的是dot，非rect， 代表着拉伸操作
    if (e.target !== this.rect) {
      const parent = e.target.offsetParent.getBoundingClientRect()
      const child = e.target.getBoundingClientRect()
      left = child.x - parent.x
      top = child.y - parent.y
      width = e.target.offsetParent.offsetWidth
      height = e.target.offsetParent.offsetHeight
    }
    const difference = this.get('dot.width') * 2; // 点击dot周边 get('dot.width') * 2 + px范围为拉伸，其他为拖动
    const resultRange = {
      x: 0,
      y: 0
    }
    resultRange.x = 0 // 0 => left, 1 => middle, 2 => right, -1 => 点击的位置不能被拖动
    resultRange.y = 0 // 0 => top, 1 => middle, 2 => bottom, -1 => 点击的位置不能被拖动
    if (left < difference) { // 点击的位置为矩形左侧
      resultRange.x = 0
    } else if (left > (width / 2 - difference) && left < (width / 2 + difference)) { // 点击的位置为矩形中间 width/2 - this.get('dot.width') ~ width/2 + this.get('dot.width')
      resultRange.x = 1
    } else if (left < width && left > (width - difference)){ // 点击的位置为矩形右侧 width - 6px ~ width
      resultRange.x = 2
    } else {
      resultRange.x = -1
    }
    if (top < difference) { // 点击的位置为矩形上侧
      resultRange.y = 0
    } else if (top > (height / 2 - difference) && top < (height / 2 + difference)) { // 点击的位置为矩形中间 height/2 - this.get('dot.width') ~ height/2 + this.get('dot.width')
      resultRange.y = 1
    } else if (top < height && top > (height - difference)){ // 点击的位置为矩形下侧 height - this.get('dot.width') ~ height
      resultRange.y = 2
    } else {
      resultRange.y = -1
    }
    if (resultRange.x === -1 || resultRange.y === -1 || (resultRange.x === 1 && resultRange.y === 1)) {
      return [-1, -1]
    }
    return [resultRange.x, resultRange.y] // 只会有八个位置能被准确返回，其余都是返回[-1, -1]
  }
  /** 浏览器窗口改变 */
  windowResize() {
    this.origin = this.target.getBoundingClientRect();
  }
  /** 默认事件执行 */
  defaultEvent() {
    window.addEventListener('resize', debounce(this.windowResize.bind(this), 500, false))
    // 右键是佛禁用
    if (this.events.contextmenu.disabled) {
      this.target.addEventListener('contextmenu', (e) => {
        e.preventDefault();
      })
    }
    // 截图功能提供
    if (!this.events.clip.disabled) {
      document.addEventListener('keydown', (e) => this.screensEvent(e, this))
    }
  }
  /**
   * 截图快捷键
   * @param {*} e
   */
  screensEvent(e, comp) {
    // 截图
    // 键入键盘ascll码时必须要先加在下面这行代码里，不要忘记了喔
    if ((e.altKey || e.ctrlKey) && [81, 83, 87].includes(e.keyCode)) {
      e.preventDefault();
      let typeCode = ''
      if (e.altKey && e.keyCode === 87) typeCode = 0 // 开始截图：alt + w
      else if (e.ctrlKey && e.keyCode === 83) typeCode = 1 // 保存当前截图：ctrl + s
      else if (e.ctrlKey && e.keyCode === 81) typeCode = 2 // 关闭当前截图：ctrl + q
      if (typeCode || typeCode === 0) comp.clipPhoto(typeCode)
    }
    // 切图
    // 键入键盘ascll码时必须要先加在下面这行代码里，不要忘记了喔
    if ([37, 38, 39, 40].includes(e.keyCode)) {
      // e.preventDefault(); // 这一行放开 就会把键盘原本事件覆盖掉
      let typeCode = ''
      if (e.keyCode === 37) typeCode = 0 // 键盘向左方向键操作
      else if (e.keyCode === 38) typeCode = 1 // 键盘向上方向键操作
      else if (e.keyCode === 39) typeCode = 2 // 键盘向右方向键操作
      else if (e.keyCode === 40) typeCode = 3 // 键盘向下方向键操作
      comp.cutPhoto(typeCode)
    }
    // if (e.ctrlKey) {
    //   this.mouseCtrl = true
    // }
    return false
  }
  /**
   * 截图操作 0 => 开始截图 1 => 保存截图 2 => 退出截图
   * @param {*} type
   */
  clipPhoto(type) {
    switch (type) {
      case 0:
        this.startClip();
        break;
      case 1:
        this.saveClip();
        break;
      case 2:
        this.closeClip();
        break;
    }
  }
  /** 开始截图 */
  startClip() {
    this.startPaint();
  }
  /** 保存截图 */
  saveClip() {
    // 有图片才允许保存截图
    if (this.img) {
      this.getClip()
    }
  }
  /** 退出截图 */
  closeClip() {
    this.clearPaint();
  }
  /**
   * 切图快捷键操作
   * @param {*} type
   */
  cutPhoto(type) {
    switch (type) {
      case 0:
        this.cutFrameMove('left');
        break
      case 1:
        this.cutFrameMove('top');
        break
      case 2:
        this.cutFrameMove('right');
        break
      case 3:
        this.cutFrameMove('bottom');
        break
    }
  }
  /**
   * 切图框键盘控制移动（增加了移动边界限制，当抵达边界时，则无法再向外侧移动）
   * @param {*} type
   */
  cutFrameMove(type) {
    if (this.childTarget) { // 只有聚焦状态的单框才能被移动, 附属移动边界限制
      const leftArea = 0; // 左边界
      const topArea = 0; // 上边界
      // 将最外层父边框宽度减去
      const rightArea = this.target.offsetWidth - this.childTarget.offsetWidth - 2; // 右边界
      const bottomArea = this.target.offsetHeight - this.childTarget.offsetHeight - 2; // 下边界
      if (type === 'left') {
        this.rect.left = this.rect.left - 5 <= leftArea ? leftArea : this.rect.left - 5;
      } else if (type === 'top') {
        this.rect.top = this.rect.top - 5 <= topArea ? topArea : this.rect.top - 5;
      } else if (type === 'right') {
        this.rect.left = Number(this.rect.left) + 5 >= rightArea ? rightArea : Number(this.rect.left) + 5;
      } else {
        this.rect.top = Number(this.rect.top)  + 5 >= bottomArea ? bottomArea : Number(this.rect.top) + 5;
      }
      this.updateRect();
    }
  }
  /** 重置图片相关参数 */
  resetImage() {
    this.target.removeChild(this.img.target);
    this.img.target = null;
    this.img.width = 0;
    this.img.height = 0;
    this.img.scale = null;
  }
  /**
   * 插入图片
   * @param {*} url 图片链接
   * @param {*} mode 图片模式
   */ 
  insertImage(url, mode = 'auto') {
    if (!url || typeof url !== 'string') {
      throw new Error('请传入正确的参数');
    }
    // 如果已经有图片，则先重置图片，再重置截图矩形框
    if (this.img.target) {
      this.resetImage();
      this.clearPaint();
    }
    const image = new Image()
    image.crossOrigin='anonymous'
    image.src = url
    this.img.target = image;
    // 图片原始宽高
    const origin = {
      width: 0,
      height: 0
    }
    image.onload = (e) => {
      origin.width = image.width;
      origin.height = image.height;
      switch (mode) {
        // 原始图片宽高（完全展示）
        case 'origin': {
          this.img.width = origin.width;
          this.img.height = origin.height;
          this.img.target.style.width = origin.width + 'px';
          this.img.target.style.height = origin.height + 'px';
          break;
        }
        // 智能计算宽高最佳显示比例
        case 'auto':
          this.autoCalcImage(image, origin);
          break;
        // 用户自定义传入宽高
        default: {
          if (Object.prototype.toString.call(mode) !== '[object Object]') {
            throw new Error('请传入正确的参数');
          }
          this.img.width = mode.width;
          this.img.height = mode.height;
          this.img.target.style.width = mode.width + 'px';
          this.img.target.style.height = mode.height + 'px';
          break;
        }
      }
    }
    this.target.appendChild(this.img.target);
  }
  /**
   * 智能计算宽高最佳显示比例
   * @param {*} image 图片对象
   * @param {*} origin 原始图片宽高
   */
  autoCalcImage(image, origin) {
    this.img.scale = this.calcBestImgScale(image);
    this.img.width = origin.width * this.img.scale.scale;
    this.img.height = origin.height * this.img.scale.scale;
    this.img.target.style.width = origin.width * this.img.scale.scale + 'px';
    this.img.target.style.height = origin.height * this.img.scale.scale + 'px';
    this.img.target.style.position = 'absolute';
    this.img.target.style.zIndex = -1;
  }
  /**
   * 计算最佳的缩放比例
   *  @param {*} image 图片对象
   * @returns 图片缩放比例参数
   */
  calcBestImgScale(image) {
    const imgScale = {
      scale: 0,
      unit: 0,
      maxScale: 0,
      minScale: 0
    }
    imgScale.scale = Number((Math.min(this.target.offsetWidth / image.width, this.target.offsetHeight / image.height)).toFixed(6));
    imgScale.unit = 100 / Number(imgScale.scale.toFixed(6)) // 转换比例生成 保存4位小数 更精确
    imgScale.maxScale = Number((imgScale.scale * 2).toFixed(6)); // 放大最大2倍数生成
    imgScale.minScale = Number((imgScale.scale * 0.2).toFixed(6)); // 缩小最小0.2倍数生成
    return imgScale;
  }
  /**
   * 获取截图canvas, 方便自己转化
   * @returns canvas
   */
    getClipCanvas() {
    const canvas = document.createElement('canvas');
    canvas.width = this.getRect().width
    canvas.height = this.getRect().height
    const context = canvas.getContext('2d');
    context.drawImage(
      this.img.target, // 规定要使用的图像、画布或视频。
      this.getRect().left / this.img.scale.scale, this.getRect().top / this.img.scale.scale,
      this.getRect().width / this.img.scale.scale, this.getRect().height / this.img.scale.scale,
      0, 0,
      canvas.width, canvas.height
    )
    return canvas
  }
  /**
   * 获取截图
   */
  getClip() {
    const outputClip = this.getClipCanvas().toDataURL('jpeg', 1)
    // 截图效果 base64格式
    console.log(outputClip);
    return outputClip
  }
}

export default Rectangle